<template>
    <div>
        <table class="wq text-center" border="0" cellpadding="0" cellspacing="1">
            <tr class="t_list_caption">
                <td>正一</td>
                <td>赔率</td>
                <td>正二</td>
                <td>赔率</td>
                <td>正三</td>
                <td>赔率</td>
                <td>正四</td>
                <td>赔率</td>
                <td>正五</td>
                <td>赔率</td>
                <td>正六</td>
                <td>赔率</td>
            </tr>
            <tr class="t_td_text">
                <td class="caption_1" :class="(moneydata['正一_单']) ? 'colorChecked': ''" @click="chooseFun('正一_单')">单</td>
                <td class="colorRed bolds odds" :class="(moneydata['正一_单']) ? 'colorChecked': ''" @click="chooseFun('正一_单')">{{ratedata['正码:过关:正一_单']}}</td>
                <td class="caption_1" :class="(moneydata['正二_单']) ? 'colorChecked': ''" @click="chooseFun('正二_单')">单</td>
                <td class="colorRed bolds odds" :class="(moneydata['正二_单']) ? 'colorChecked': ''" @click="chooseFun('正二_单')">{{ratedata['正码:过关:正二_单']}}</td>
                <td class="caption_1" :class="(moneydata['正三_单']) ? 'colorChecked': ''" @click="chooseFun('正三_单')">单</td>
                <td class="colorRed bolds odds" :class="(moneydata['正三_单']) ? 'colorChecked': ''" @click="chooseFun('正三_单')">{{ratedata['正码:过关:正三_单']}}</td>
                <td class="caption_1" :class="(moneydata['正四_单']) ? 'colorChecked': ''" @click="chooseFun('正四_单')">单</td>
                <td class="colorRed bolds odds" :class="(moneydata['正四_单']) ? 'colorChecked': ''" @click="chooseFun('正四_单')">{{ratedata['正码:过关:正四_单']}}</td>
                <td class="caption_1" :class="(moneydata['正五_单']) ? 'colorChecked': ''" @click="chooseFun('正五_单')">单</td>
                <td class="colorRed bolds odds" :class="(moneydata['正五_单']) ? 'colorChecked': ''" @click="chooseFun('正五_单')">{{ratedata['正码:过关:正五_单']}}</td>
                <td class="caption_1" :class="(moneydata['正六_单']) ? 'colorChecked': ''" @click="chooseFun('正六_单')">单</td>
                <td class="colorRed bolds odds" :class="(moneydata['正六_单']) ? 'colorChecked': ''" @click="chooseFun('正六_单')">{{ratedata['正码:过关:正六_单']}}</td>
            </tr>
            <tr class="t_td_text">
                <td class="caption_1" :class="(moneydata['正一_双']) ? 'colorChecked': ''" @click="chooseFun('正一_双')">双</td>
                <td class="colorRed bolds odds" :class="(moneydata['正一_双']) ? 'colorChecked': ''" @click="chooseFun('正一_双')">{{ratedata['正码:过关:正一_双']}}</td>
                <td class="caption_1" :class="(moneydata['正二_双']) ? 'colorChecked': ''" @click="chooseFun('正二_双')">双</td>
                <td class="colorRed bolds odds" :class="(moneydata['正二_双']) ? 'colorChecked': ''" @click="chooseFun('正二_双')">{{ratedata['正码:过关:正二_双']}}</td>
                <td class="caption_1" :class="(moneydata['正三_双']) ? 'colorChecked': ''" @click="chooseFun('正三_双')">双</td>
                <td class="colorRed bolds odds" :class="(moneydata['正三_双']) ? 'colorChecked': ''" @click="chooseFun('正三_双')">{{ratedata['正码:过关:正三_双']}}</td>
                <td class="caption_1" :class="(moneydata['正四_双']) ? 'colorChecked': ''" @click="chooseFun('正四_双')">双</td>
                <td class="colorRed bolds odds" :class="(moneydata['正四_双']) ? 'colorChecked': ''" @click="chooseFun('正四_双')">{{ratedata['正码:过关:正四_双']}}</td>
                <td class="caption_1" :class="(moneydata['正五_双']) ? 'colorChecked': ''" @click="chooseFun('正五_双')">双</td>
                <td class="colorRed bolds odds" :class="(moneydata['正五_双']) ? 'colorChecked': ''" @click="chooseFun('正五_双')">{{ratedata['正码:过关:正五_双']}}</td>
                <td class="caption_1" :class="(moneydata['正六_双']) ? 'colorChecked': ''" @click="chooseFun('正六_双')">双</td>
                <td class="colorRed bolds odds" :class="(moneydata['正六_双']) ? 'colorChecked': ''" @click="chooseFun('正六_双')">{{ratedata['正码:过关:正六_双']}}</td>
            </tr>
            <tr class="t_td_text">
                <td class="caption_1" :class="(moneydata['正一_大']) ? 'colorChecked': ''" @click="chooseFun('正一_大')">大</td>
                <td class="colorRed bolds odds" :class="(moneydata['正一_大']) ? 'colorChecked': ''" @click="chooseFun('正一_大')">{{ratedata['正码:过关:正一_大']}}</td>
                <td class="caption_1" :class="(moneydata['正二_大']) ? 'colorChecked': ''" @click="chooseFun('正二_大')">大</td>
                <td class="colorRed bolds odds" :class="(moneydata['正二_大']) ? 'colorChecked': ''" @click="chooseFun('正二_大')">{{ratedata['正码:过关:正二_大']}}</td>
                <td class="caption_1" :class="(moneydata['正三_大']) ? 'colorChecked': ''" @click="chooseFun('正三_大')">大</td>
                <td class="colorRed bolds odds" :class="(moneydata['正三_大']) ? 'colorChecked': ''" @click="chooseFun('正三_大')">{{ratedata['正码:过关:正三_大']}}</td>
                <td class="caption_1" :class="(moneydata['正四_大']) ? 'colorChecked': ''" @click="chooseFun('正四_大')">大</td>
                <td class="colorRed bolds odds" :class="(moneydata['正四_大']) ? 'colorChecked': ''" @click="chooseFun('正四_大')">{{ratedata['正码:过关:正四_大']}}</td>
                <td class="caption_1" :class="(moneydata['正五_大']) ? 'colorChecked': ''" @click="chooseFun('正五_大')">大</td>
                <td class="colorRed bolds odds" :class="(moneydata['正五_大']) ? 'colorChecked': ''" @click="chooseFun('正五_大')">{{ratedata['正码:过关:正五_大']}}</td>
                <td class="caption_1" :class="(moneydata['正六_大']) ? 'colorChecked': ''" @click="chooseFun('正六_大')">大</td>
                <td class="colorRed bolds odds" :class="(moneydata['正六_大']) ? 'colorChecked': ''" @click="chooseFun('正六_大')">{{ratedata['正码:过关:正六_大']}}</td>
            </tr>
            <tr class="t_td_text">
                <td class="caption_1" :class="(moneydata['正一_小']) ? 'colorChecked': ''" @click="chooseFun('正一_小')">小</td>
                <td class="colorRed bolds odds" :class="(moneydata['正一_小']) ? 'colorChecked': ''" @click="chooseFun('正一_小')">{{ratedata['正码:过关:正一_小']}}</td>
                <td class="caption_1" :class="(moneydata['正二_小']) ? 'colorChecked': ''" @click="chooseFun('正二_小')">小</td>
                <td class="colorRed bolds odds" :class="(moneydata['正二_小']) ? 'colorChecked': ''" @click="chooseFun('正二_小')">{{ratedata['正码:过关:正二_小']}}</td>
                <td class="caption_1" :class="(moneydata['正三_小']) ? 'colorChecked': ''" @click="chooseFun('正三_小')">小</td>
                <td class="colorRed bolds odds" :class="(moneydata['正三_小']) ? 'colorChecked': ''" @click="chooseFun('正三_小')">{{ratedata['正码:过关:正三_小']}}</td>
                <td class="caption_1" :class="(moneydata['正四_小']) ? 'colorChecked': ''" @click="chooseFun('正四_小')">小</td>
                <td class="colorRed bolds odds" :class="(moneydata['正四_小']) ? 'colorChecked': ''" @click="chooseFun('正四_小')">{{ratedata['正码:过关:正四_小']}}</td>
                <td class="caption_1" :class="(moneydata['正五_小']) ? 'colorChecked': ''" @click="chooseFun('正五_小')">小</td>
                <td class="colorRed bolds odds" :class="(moneydata['正五_小']) ? 'colorChecked': ''" @click="chooseFun('正五_小')">{{ratedata['正码:过关:正五_小']}}</td>
                <td class="caption_1" :class="(moneydata['正六_小']) ? 'colorChecked': ''" @click="chooseFun('正六_小')">小</td>
                <td class="colorRed bolds odds" :class="(moneydata['正六_小']) ? 'colorChecked': ''" @click="chooseFun('正六_小')">{{ratedata['正码:过关:正六_小']}}</td>
            </tr>
            <tr class="t_td_text">
                <td class="caption_1" :class="(moneydata['正一_红波']) ? 'colorChecked': ''" @click="chooseFun('正一_红波')" style="color: #f20c00;">红波</td>
                <td class="colorRed bolds odds" :class="(moneydata['正一_红波']) ? 'colorChecked': ''" @click="chooseFun('正一_红波')">{{ratedata['正码:过关:正一_红波']}}</td>
                <td class="caption_1" :class="(moneydata['正二_红波']) ? 'colorChecked': ''" @click="chooseFun('正二_红波')" style="color: #f20c00;">红波</td>
                <td class="colorRed bolds odds" :class="(moneydata['正二_红波']) ? 'colorChecked': ''" @click="chooseFun('正二_红波')">{{ratedata['正码:过关:正二_红波']}}</td>
                <td class="caption_1" :class="(moneydata['正三_红波']) ? 'colorChecked': ''" @click="chooseFun('正三_红波')" style="color: #f20c00;">红波</td>
                <td class="colorRed bolds odds" :class="(moneydata['正三_红波']) ? 'colorChecked': ''" @click="chooseFun('正三_红波')">{{ratedata['正码:过关:正三_红波']}}</td>
                <td class="caption_1" :class="(moneydata['正四_红波']) ? 'colorChecked': ''" @click="chooseFun('正四_红波')" style="color: #f20c00;">红波</td>
                <td class="colorRed bolds odds" :class="(moneydata['正四_红波']) ? 'colorChecked': ''" @click="chooseFun('正四_红波')">{{ratedata['正码:过关:正四_红波']}}</td>
                <td class="caption_1" :class="(moneydata['正五_红波']) ? 'colorChecked': ''" @click="chooseFun('正五_红波')" style="color: #f20c00;">红波</td>
                <td class="colorRed bolds odds" :class="(moneydata['正五_红波']) ? 'colorChecked': ''" @click="chooseFun('正五_红波')">{{ratedata['正码:过关:正五_红波']}}</td>
                <td class="caption_1" :class="(moneydata['正六_红波']) ? 'colorChecked': ''" @click="chooseFun('正六_红波')" style="color: #f20c00;">红波</td>
                <td class="colorRed bolds odds" :class="(moneydata['正六_红波']) ? 'colorChecked': ''" @click="chooseFun('正六_红波')">{{ratedata['正码:过关:正六_红波']}}</td>
            </tr>
            <tr class="t_td_text">
                <td class="caption_1" :class="(moneydata['正一_蓝波']) ? 'colorChecked': ''" @click="chooseFun('正一_蓝波')" style="color: #2030f4;">蓝波</td>
                <td class="colorRed bolds odds" :class="(moneydata['正一_蓝波']) ? 'colorChecked': ''" @click="chooseFun('正一_蓝波')">{{ratedata['正码:过关:正一_蓝波']}}</td>
                <td class="caption_1" :class="(moneydata['正二_蓝波']) ? 'colorChecked': ''" @click="chooseFun('正二_蓝波')" style="color: #2030f4;">蓝波</td>
                <td class="colorRed bolds odds" :class="(moneydata['正二_蓝波']) ? 'colorChecked': ''" @click="chooseFun('正二_蓝波')">{{ratedata['正码:过关:正二_蓝波']}}</td>
                <td class="caption_1" :class="(moneydata['正三_蓝波']) ? 'colorChecked': ''" @click="chooseFun('正三_蓝波')" style="color: #2030f4;">蓝波</td>
                <td class="colorRed bolds odds" :class="(moneydata['正三_蓝波']) ? 'colorChecked': ''" @click="chooseFun('正三_蓝波')">{{ratedata['正码:过关:正三_蓝波']}}</td>
                <td class="caption_1" :class="(moneydata['正四_蓝波']) ? 'colorChecked': ''" @click="chooseFun('正四_蓝波')" style="color: #2030f4;">蓝波</td>
                <td class="colorRed bolds odds" :class="(moneydata['正四_蓝波']) ? 'colorChecked': ''" @click="chooseFun('正四_蓝波')">{{ratedata['正码:过关:正四_蓝波']}}</td>
                <td class="caption_1" :class="(moneydata['正五_蓝波']) ? 'colorChecked': ''" @click="chooseFun('正五_蓝波')" style="color: #2030f4;">蓝波</td>
                <td class="colorRed bolds odds" :class="(moneydata['正五_蓝波']) ? 'colorChecked': ''" @click="chooseFun('正五_蓝波')">{{ratedata['正码:过关:正五_蓝波']}}</td>
                <td class="caption_1" :class="(moneydata['正六_蓝波']) ? 'colorChecked': ''" @click="chooseFun('正六_蓝波')" style="color: #2030f4;">蓝波</td>
                <td class="colorRed bolds odds" :class="(moneydata['正六_蓝波']) ? 'colorChecked': ''" @click="chooseFun('正六_蓝波')">{{ratedata['正码:过关:正六_蓝波']}}</td>
            </tr>
            <tr class="t_td_text">
                <td class="caption_1" :class="(moneydata['正一_绿波']) ? 'colorChecked': ''" @click="chooseFun('正一_绿波')" style="color: #0c8918;">绿波</td>
                <td class="colorRed bolds odds" :class="(moneydata['正一_绿波']) ? 'colorChecked': ''" @click="chooseFun('正一_绿波')">{{ratedata['正码:过关:正一_绿波']}}</td>
                <td class="caption_1" :class="(moneydata['正二_绿波']) ? 'colorChecked': ''" @click="chooseFun('正二_绿波')" style="color: #0c8918;">绿波</td>
                <td class="colorRed bolds odds" :class="(moneydata['正二_绿波']) ? 'colorChecked': ''" @click="chooseFun('正二_绿波')">{{ratedata['正码:过关:正二_绿波']}}</td>
                <td class="caption_1" :class="(moneydata['正三_绿波']) ? 'colorChecked': ''" @click="chooseFun('正三_绿波')" style="color: #0c8918;">绿波</td>
                <td class="colorRed bolds odds" :class="(moneydata['正三_绿波']) ? 'colorChecked': ''" @click="chooseFun('正三_绿波')">{{ratedata['正码:过关:正三_绿波']}}</td>
                <td class="caption_1" :class="(moneydata['正四_绿波']) ? 'colorChecked': ''" @click="chooseFun('正四_绿波')" style="color: #0c8918;">绿波</td>
                <td class="colorRed bolds odds" :class="(moneydata['正四_绿波']) ? 'colorChecked': ''" @click="chooseFun('正四_绿波')">{{ratedata['正码:过关:正四_绿波']}}</td>
                <td class="caption_1" :class="(moneydata['正五_绿波']) ? 'colorChecked': ''" @click="chooseFun('正五_绿波')" style="color: #0c8918;">绿波</td>
                <td class="colorRed bolds odds" :class="(moneydata['正五_绿波']) ? 'colorChecked': ''" @click="chooseFun('正五_绿波')">{{ratedata['正码:过关:正五_绿波']}}</td>
                <td class="caption_1" :class="(moneydata['正六_绿波']) ? 'colorChecked': ''" @click="chooseFun('正六_绿波')" style="color: #0c8918;">绿波</td>
                <td class="colorRed bolds odds" :class="(moneydata['正六_绿波']) ? 'colorChecked': ''" @click="chooseFun('正六_绿波')">{{ratedata['正码:过关:正六_绿波']}}</td>
            </tr>
        </table>

    </div>
</template>
<style scoped>
    .colorChecked{
        background: bisque;
    }
</style>

<script>

    var timer = null;
    import axios from 'axios'
    import {lotterytype} from '../../../../assets/js/lotterytype.js'
    export default {
        name: "LhcGg",
        props: {  //普通类型：String、Number、Boolean、Null    引用类型： Array、Object
            betmoney: {   //   下注金额
                type: String,
                required: true
            },
            resetinp: {   //   是否重填已下注金额  0为未下注  其他为已下注
                type: Number,
                required: true
            },
            openBet: {  //开奖  可下注
                type: Boolean,
                required: true
            },
            ninetime: {  //90s
                type: Number,
                required: true
            },
        },
        data(){
            return{
                ratedata: {},  //实时赔率
                params: {},  //菜单
                moneydata: {},
                betdataArr: [],  //下注 提交data
                nowitem: '',  //当前操作的下注item号
                arr: [],  //
                typetit: '自选不中',
                odds: '--', 
                continuousData: {
                    betArr: [],  //下注数组
                    radioopt: 0,  //当前类别
                    betnowtype: 0,  //当前类别 赔率
                },
            }
        },
        methods: {
            init(){
                var _this = this;
                // console.log(this.$route.query);

                this.params = lotterytype.apiParams(this.$route.query.id,this.$route.query.levelid);

                if(window.localStorage.Authorization){
                    
                    _this.$httpGet('/api/game/listRate/'+ _this.params.nowlottery + '/' + _this.params.levellottery +'oa18').then(response => {
                        
                        if(response.status == 200){
                            _this.ratedata = response.data.rates;
                            // console.log(_this.ratedata);
                            _this.$emit('contBetFun',_this.continuousData);

                            if(response.data.need){
                                _this.$httpPost('/api/setting/rateItem/'+ _this.params.nowlottery + '/' + _this.params.levellottery +'oa18').then(response => {
                                
                                    if(response.status == 200){
                                        
                                    }

                                });
                            }
                        }

                    });

                }

            },
            inits(){
                var _this = this;
                // console.log(this.$route.query);

                this.params = lotterytype.apiParams(this.$route.query.id,this.$route.query.levelid);

                if(window.localStorage.Authorization){

                    if (timer) {
                        clearInterval(timer);
                        timer = null;
                    }

                    _this.$httpGet('/api/game/listRate/'+ _this.params.nowlottery + '/' + _this.params.levellottery +'oa18').then(response => {
                        
                        if(response.status == 200){
                            _this.ratedata = response.data.rates;
                            // console.log(_this.ratedata);
                            _this.$emit('contBetFun',_this.continuousData);

                            if(response.data.need){
                                _this.$httpPost('/api/setting/rateItem/'+ _this.params.nowlottery + '/' + _this.params.levellottery +'oa18').then(response => {
                                
                                    if(response.status == 200){
                                        
                                    }

                                });
                            }

                            timer = setInterval(() => {
                                _this.inits();
                            }, 10 * 1000)
                        }

                    });

                }

            },
            //click  
            chooseFun(item){
                this.continuousData.betArr = [];
                this.continuousData.betnowtype = 0;
                if(this.moneydata[item]){
                    this.moneydata[item] = false;
                }else{
                    if(this.moneydata[item] == false){
                        this.moneydata[item] = true;
                    }else if(this.moneydata[item] == undefined){
                        // Vue.set方法用来新增对象的属性。
                        this.$set(this.moneydata, item, true);
                    }
                    
                }

                var lastItem = item.substr(0,2);
                
                for(const value in this.moneydata){
                    
                    if(value != item && value.indexOf(lastItem) != -1 && this.moneydata[value]){
                        this.moneydata[value] = false;
                    }

                    if(this.moneydata[value]){
                        this.continuousData.betArr.push(value);
                        if(this.continuousData.betnowtype == 0){
                            this.continuousData.betnowtype = this.ratedata['正码:过关:' + value];
                        }else{
                            this.continuousData.betnowtype = parseFloat(this.continuousData.betnowtype) * parseFloat(this.ratedata['正码:过关:' + value]);
                        }
                        
                    }

                }
                // console.log(this.continuousData);
                this.$emit('contBetFun',this.continuousData);
            },
            
        },
        mounted(){
            this.inits();
        },
        beforeDestroy(){
            clearInterval(timer);
        },
        watch :{
            resetinp: function(now,old){

                if(now != 0){   //重填下注金额

                    this.moneydata = {};  //清空所有下注金额
                    this.betdataArr = [];
                    this.arr = [];
                    
                }
            },
            openBet: function(now,old){
                console.log(now,old);
                this.init();
            },
            ninetime: function(now,old){
                console.log('------------90s  刷新');
                //90s  刷新数据
                this.init();
            },
        },
    }
</script>
